<template>
	<div class="psi">
		<!-- 诊所描述Card -->
		<div class="inCard">
			
		</div>
		
		<div class="shop-header">
			
			<div class="left">
				<!-- top left selected -->
				<el-select v-model="OptionsValue" filterable placeholder="全部状态" size="mini" @change="OptionsValueSelected">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
				
				<span style="font-size: 12px;margin-left: 20px;">提交日期：</span>
				    <el-date-picker
				      v-model="OptionsValue2"
				      align="right"
				      type="date"
					  size="mini"
				      placeholder="选择日期"
				      :picker-options="pickerOptions">
				    </el-date-picker>
					
				<el-select v-model="OptionsValue3" filterable placeholder="全部供应商" size="mini">
				    <el-option
				      v-for="item in options3"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value"
					  @change="handSelected"
					  >
				    </el-option>
				</el-select>
			</div>
			<div class="right">
				<!-- btn -->
				<div class="header-btn">
					<el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" size="mini" :icon="v.icon"
						@click="handClick(i)">{{ v.title }}</el-button>
				</div>
				
				<!-- 嵌套表格 Model -->
				<el-dialog title="结算单" :visible.sync="dialogFormVisible">
				  <div class="content">
					  <!-- contTilte -->
					  <div class="contTile">
						  <span style="font-size: 12px;">供应商</span>
						  <el-select v-model="OptionsValue3" filterable placeholder="全部供应商" @focus="gys" @change="changeSelect" size="mini">
						      <el-option
						        v-for="item in options3"
						        :key="item.value"
						        :label="item.supplierName"
						        :value="item.supplierName"
								>
						      </el-option>
						  </el-select>
					  </div>
						  <span style="font-size: 12px;padding: 8px;margin-top: 20px;display: inline-block;margin-top: 12px;">关联单据</span>
					  <div class="table">
						  <el-table :data="tableData" v-loading="loading" ref="Table" @selection-change="selectionChange">
						
							<el-table-column
							      type="selection"
							      width="55">
							    </el-table-column>
							  <!-- oddNumbers -->
						    <el-table-column property="serialNumber" label="单号" width="80" align="left"></el-table-column>
						    <el-table-column property="status" label="状态" width="80" align="center">
								<template slot-scope="scope">
									<el-tag
									  :type="status === 2  ? 'primary' : 'info'"
									  disable-transitions>{{ '未审核'}}</el-tag>
								</template>
							</el-table-column>
							<el-table-column property="types" label="类型" width="80" align="center"></el-table-column>
						    <el-table-column property="storageTime" label="出/入库时间" width="160" align="center"></el-table-column>
							<el-table-column property="storagePersonnel" label="操作人" width="80" align="center"></el-table-column>
							<el-table-column property="varietiesNumber" label="品种" width="80" align="center"></el-table-column>
							<el-table-column property="quantity" label="数量" width="80" align="center"></el-table-column>
							<el-table-column property="taxInclusiveAmount" label="金额" width="80" align="center">
								<template slot-scope="scope">
									<span>{{ '￥' + scope.row.taxInclusiveAmount==null ? '￥0.00' : '￥' + scope.row.taxInclusiveAmount}}</span>
								</template>
							</el-table-column>
							<el-table-column property="noTaxInclusiveAmount" label="税额" width="80">
								<!-- <template slot-scope="scope">
									<span>{{ '￥' + scope.row.noTaxInclusiveAmount != '' ? '￥1' + scope.row.noTaxInclusiveAmount : '￥0.00' }}</span>
								</template> -->
							</el-table-column>
							<el-table-column property="storeroom" label="出/入库门店" width="120" align="center"></el-table-column>
						  </el-table>
						 <div class="text" style="font-size: 12px;padding: 12px;text-align: right;border-bottom: 2px solid #dedede;">
						 	<span>单据数量：</span><span style="color: #000;">{{ num + '，' }}</span>
						 	<span>价税合计（总计）：</span><span style="color: #000;">{{ '￥' + kindsOf + '，' }}</span>
						 	<span>金额（总计）：￥</span><span style="color: #aa0000;">{{  totalPrice + '，' }}</span>
						 	<span>税额（总计）：</span><span style="color: #000;">{{ '￥' + tax }}</span>
						 </div>
					  </div>
				  </div>
				    <div slot="footer" class="dialog-footer">
				      <el-button size="mini" type="primary" @click="submitOver">完成</el-button>
				      <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
				    </div>
				</el-dialog>
				
			</div>
		</div>
		
		<!-- 测试高度 -->
		<shopOrder ref="sonRef" :status="status"></shopOrder>

	</div>
		
	</div>
</template>

<script>
	// 接口相关
	import { 
		addSettlement,
		selectSupplier,selectDropDownList,
		settlement
		} from "@/api/PSI";
	// selfs / sons
	import shopOrder from '../../external/shopStore/shopOrder.vue'
	export default {
		components: {
			shopOrder
		},
		data() {
			return {
				// str
				totalPrice:'',
				SwitchValueSend:'',
				status:'2',
				username:'',
				OptionsValue: '',
				OptionsValue1: '',
				OptionsValue2: '',
				OptionsValue3: '',
				storeroom:'',
				currentRow: null,
				//blean
				SwitchValue:false,
				dialogFormVisible: false,
				dialogVisible: false,
				disabled: true,
				loading: false,
				//numbers
				kindsOf:0,
				num: 0,
				tax:0,
				//arr
				sendData:[],
				tableData:[],
				editform:[],
				// title右侧按钮
				headerBtn:[
				 // { back:"back", title:"返回", type:"primary" },
				 { add:"addwind", title:"新增结算单", type:"primary", icon:"el-icon-plus" },
				 { back:"back", title:"退货", type:"", icon:"el-icon-time" },
				 { export:"export", title:"导出", type:"", icon:"el-icon-upload2" },
				],
				options:  [{value: '',label: '全部'},{value: '1',label: '已结算'}, { value: '2',label: '未结算'}],
				options1: [{value: '提交日期',label: '提交日期'}, { value: '提交日期2',label: '提交日期2'}],
				options3: [{value: '九州通医药',label: '九州通医药'}, { value: '杀杀',label: '杀杀'}],
				pickerOptions: {
				  disabledDate(time) {
					return time.getTime() > Date.now();
				  },
				  shortcuts: [{
					text: '今天',
					onClick(picker) {
					  picker.$emit('pick', new Date());
					}
				  }, {
					text: '昨天',
					onClick(picker) {
					  const date = new Date();
					  date.setTime(date.getTime() - 3600 * 1000 * 24);
					  picker.$emit('pick', date);
					}
				  }, {
					text: '一周前',
					onClick(picker) {
					  const date = new Date();
					  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
					  picker.$emit('pick', date);
					}
				  }]
				},
			}
		},
		  computed: {

		  },
		//生命周期
		created() {
			
		},
		mounted() {
			// getlocal
			this.userinfo = JSON.parse(localStorage.getItem('userInfo'))
			// this.desArr = Object.values(this.userinfo); = Object.values(this.userinfo)
			// console.log(this.userinfo);
			// 赋值
			this.username = this.userinfo.userName
			// console.log(this.username);
		},
		methods: {
			// 步骤
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑
						this.dialogFormVisible = true
						break;
					case 1:
						// 处理索引1的逻辑
						// this.$confirm('敬请期待')
						// 	.then(_ => {})
						// 	.catch(_ => {});
						// 跳转路由至采购单
						this.$router.push('/shopOrder')
						
						break;
					case 2:
						// 处理索引2的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
					case 3:
						// 处理索引2的逻辑
						this.$confirm('3;敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
				}
			},
			handSelected(){
				// console.log(this.OptionsValue3);
			},
			selectionChange(selection){
				console.log(selection);
				this.sendData = selection
				// this.num = selection.reduce((i, v) => i + Number(v.quantity), 0);
				// this.totalPrice = selection.reduce((i, v) => i + Number(v.taxInclusiveAmount), 0);
				if (selection.length > 1) {
				        this.$refs.Table.clearSelection()
				        this.$refs.Table.toggleRowSelection(selection.pop())
				  }else{
					// this.selection = selection
					// 赋值： 结算状态:1:已结算2:未结算3:待审核 const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
					this.num = selection.reduce((i, v) => i + Number(v.quantity), 0);
					this.totalPrice = selection.reduce((i, v) => i + Number(v.taxInclusiveAmount), 0);
					// this.status = selection.reduce((i, v) =>  Number(v.settlementStatus), 1);
					// console.log(this.status);
					// let newArr = selection.map(v => {v.settlementStatus -=1;  return v } );
					// // this.status = newArr[newArr.length-1].settlementStatus
					// // console.log(newArr[newArr.length-1].settlementStatus);
				  }
					  
				// if(e.map(v =>  v.settlementStatus) == 2 ){
				// 	// this.status = e.map(v => { return v.settlementStatus=1 });
				// 	console.log(1111111);
				// }else{
				// 	// this.status = e.map(v => { return v.settlementStatus=2 });
				// 	console.log(222222222);
				// }
			},
			handleSelectionChange(val) {
				// let Switch = 'Switch';
				// this.editform = val.map((item, index) => {
				//   return {
				// 		...item,
				// 		[ Switch ]: false
				// 	};
				// });
			},
			async changeSelect(e){
				this.OptionsValue3 = e
				let res = await selectSupplier({
					supplier: this.OptionsValue3
				})
			  // console.log(res);
			  this.tableData = res.data.content;
			},
			// 供应商
			async gys(){
				let result = await selectDropDownList({})
				// console.log(result,'供应商下拉列表');
				this.options3 = result.data.content
			},

			OptionsValueSelected(e){
				this.status = e;		
				this.$refs.sonRef.loadData(this.status);
				// console.log(this.status);
			},

			// 提交
			async submitOver(){
				// console.log(this.sendData);
				// let listData = [ 
				// 	{
				// 		"actualAmount":  this.totalPrice,
				// 		"actualTaxAmount": this.tax,
				// 		"auditPeople": this.username,
				// 		"auditTime": "",
				// 		"id": 0,
				// 		"numbers": this.num,
				// 		"operator": this.username,
				// 		"purchaseId": "",
				// 		"settlementNumber": "",
				// 		"status": this.settlementStatus,
				// 		"store": this.storeroom,
				// 		"submissionTime": "",
				// 		"submitPeople": "",
				// 		"supplier": this.OptionsValue3,
				// 		"times": "",
				// 		"totalPrice": "",
				// 		"types": this.tableData[this.tableData.length-1].types,
				// 		"variety": this.kindsOf,
				// 		}
				// 	]
					console.log(this.sendData,'准备发');
					// 调接口
					let rs = await addSettlement(this.sendData)
					console.log(rs);
					if(rs.code === 200){
						// 定时器
						this.loading = true;
						setTimeout(() => {
							this.$notify({
								  title: '结算成功',
								  message: '结算状态已修改',
								  type: 'success'
								});
								// this.fullscreenLoading = false;
							}, 2000)
						this.loading = false
						this.dialogFormVisible = false
					}else{
						console.log('fail');
					}
			}
		},


	}
</script>

<style lang="less" scoped>
.psi{
	height: 100%;
	width: 100%;
	.shop-header{
		display: flex;
		justify-content: space-between;
		// left
		.left{
			/deep/.el-select{
				width: 120px !important;
				margin-left: 8px;
			}
			/deep/.el-date-editor.el-input, .el-date-editor.el-input__inner{
				width: 220px;
				margin-left: 8px;
			}

		}
		// right
		.right{
			
			.content{
			/deep/.el-table thead{
				font-size: 12px!important;
			}
			/deep/.el-table .cell{
				font-size: 12px;
			}
				.contTile{
					border-radius: 4px;
					background-color: #ffffea;
					/deep/.el-input__inner{
						width: 220px;
						border-radius: 0;
						border-bottom: 0 ;
						border-top: 0;
						background-color: #ffffea;
					}
					/deep/.el-select>.el-input{
						width: 220px;
						background-color: #ffffea;
					}

					span{
						padding: 8px;
					}
					width: 100%;
					border: 1px solid #d8d8d8;
					margin-left: 8px;
					// table
					.table{
						/deep/.el-table--scrollable-x .el-table__body-wrapper{
							font-size: 12px;
						}
						.text{
							span{
								font-size: 12px;
							}
						}
					}
					
				}
			}
		}
	}
	.form{
		.formtitle{
			
		}
		.formLeft{
			
		}
		.formRight{
			
		}
	}
}
</style>